<template>
  <div class='container'>
    <el-container style="height: 100vh;">
      <!--  头部   -->
      <el-header class='header'>
        <el-row type="flex" justify="center" align='middle'>
          <el-col :span="13">
            <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                :ellipsis="false"
                @select="handleSelect"
            >
              <el-menu-item index="0">
                <img
                    style="width: 150px"
                    src="../assets/images/element-plus-logo.svg"
                    alt="Element logo"
                />
              </el-menu-item>
              <div class="flex-grow"/>
              <el-menu-item index="1">首页</el-menu-item>
              <el-menu-item index="2">分类</el-menu-item>
              <el-menu-item index="3">标签云</el-menu-item>
              <el-menu-item index="4">资源</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="4">
            <el-input
                v-model="queryParams"
                style="width: 240px;"
                placeholder="全局搜索"
                :prefix-icon="Search"
            />
          </el-col>
          <el-col :span="7" class="custom-col">
            <div class="custom-container">
              <el-dropdown>
                <el-avatar :size="state.size" :src="userStore.avatar" />
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="goToEditArticle">写博客</el-dropdown-item>
                    <el-dropdown-item>个人设置</el-dropdown-item>
                    <el-dropdown-item divided>退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <!-- 其他元素，如通知、刷新、主题切换 -->
            </div>
          </el-col>
        </el-row>
      </el-header>
      <!--   主体部分   -->
      <el-container class="main">
         <!--   我是左边栏捏     -->
        <el-aside class="left-bar">
          <component :is="leftComponent" @changeLeftMenu="handleLeftSelect"/>
        </el-aside>
        <!-- 主要内容区域 -->
        <el-main class="main-content">
          <component :is="mainComponent" :changeArtView="changeArtView"/>
        </el-main>
        <!--   我是右边栏捏   -->
        <el-aside class="right-bar">
          <component :is="rightComponent"/>
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
  import '@/assets/css/index.css';
  import { useRouter } from 'vue-router'
  import {useArticleStore} from '@/stores/modules/article'
  import {useUserStore} from '@/stores/modules/user'
  import {ref,onMounted,shallowRef,defineAsyncComponent,reactive} from 'vue';
  import {
    Search
  } from '@element-plus/icons-vue'

  //=============== 数据 ===============
  const mainComponent = shallowRef(
    defineAsyncComponent(() => import('@/components/article/ArticleList.vue'))
  )

  const leftComponent = shallowRef(
    defineAsyncComponent(() => import('@/components/sidebar/MenuLeftSidebar.vue'))
  )

  const rightComponent = shallowRef(
    defineAsyncComponent(() => import('@/components/sidebar/RightSidebar.vue'))
  )
  const articleStore = useArticleStore()
  const userStore=useUserStore()
  const router = useRouter()
  const queryParams = ref("ArticleView")
  const activeIndex = ref('1')
  const state = reactive({
    size: 30
  })

  //=============== 函数 ===============
  //顶栏菜单栏的切换
  const handleSelect = (key: string, keyPath: string[]) => {
    switch (key) {
      case '1'://点击首页，切回首页的列表页和左边栏
        mainComponent.value = defineAsyncComponent(() => import('@/components/article/ArticleList.vue'))
        leftComponent.value = defineAsyncComponent(() => import('@/components/sidebar/MenuLeftSidebar.vue'))
        break;
      default:
        break;
    }
    //console.log(key, keyPath)
  }

  //左边栏控制切换
  const handleLeftSelect = (key: string, keyPath: string[]) => {
    switch (key) {
      case '1':
      case '2':
      case '3':
      case '4':
      case '5':
      case '6'://点击切回首页的列表页
        mainComponent.value = defineAsyncComponent(() => import('@/components/article/ArticleList.vue'))
        break;
      default:
        break;
    }
    //console.log(key, keyPath)
  }

  const goToEditArticle = () => {
    router.push({ name: 'edit' }) // 跳转到 editAriicle 页面
  }

  //切换到文章视图
  const changeArtView = (article: any) => {
    articleStore.setCurrentArticle(article)
    activeIndex.value = '' // 清空上方菜单的选中样式，参考知乎
    mainComponent.value = defineAsyncComponent(() => import('@/components/article/ArticlePage.vue'))
  }

  //=============== 事件注册 ===============

  //=============== 钩子 ===============
  onMounted(()=>{
    userStore.queryById()
  })


</script>

<style scoped>
/*可以在这里添加博客页面的样式（对原本ele样式的覆盖重写*/
/*头部 */
.el-header {
  padding-left: 0px;
  padding-right: 0px
}
/*取消主体区域的边距 */
.el-main{
    padding:0
  }
/*头像及覆盖*/
.el-avatar {
  border: 1px solid #ffffff; /* 添加蓝色边框 */
  box-shadow: 0 0 4px rgba(64, 158, 255, 0.5); /* 添加阴影效果 */
  transition: all 0.3s ease; /* 添加平滑过渡效果 */
  cursor: pointer; /* 悬停时鼠标指针变成小手 */
  outline: none; /* 去掉点击时的黑色边框 */
}

.el-avatar:hover {
  border-color: #66b1ff; /* 鼠标悬停时改变边框颜色 */
  box-shadow: 0 0 12px rgba(64, 158, 255, 0.8); /* 鼠标悬停时增加阴影效果 */
}
</style>
